<template>
  <div class="news-radio">

    <page-list-layout v-if="!loading">
      <template v-slot:one>
        <radio-header
            :radio-header-data="categories"
            :radioTypeId="radioTypeId"
            @selectRadioType="selectRadioType"
        />
      </template>
      <template v-slot:two>
        <div class=" grid grid-cols-2 gap-8" v-if="!radioTypeId" :class="store.isFlag ? '' : 'flex flex-col'">
          <program-list
              :programs="programs"
          />
          <program-list
              :programs="toplist"
          />
        </div>
        <div v-else>
          <good-radio
              :radioTypeData="radioTypeData"
              @jumpDjRadio="jumpDjRadio"
          />
        </div>
      </template>
      <template v-slot:three>
        <radio-type
            v-if="!radioTypeId"
            @jumpDjRadio="jumpDjRadio"
            @selectRadioType="selectRadioType"
        />
        <radio-ranking-list
            v-else
            :radioTypeId="radioTypeId"
        />
      </template>
    </page-list-layout>
    <div class="flex items-center justify-around z-10 mt-60" v-else>
      <van-loading type="spinner" />
    </div>
  </div>
</template>

<script setup>
import PageListLayout from '@/components/PageListLayout/index.vue'
import RadioHeader from './components/RadioHeader/index.vue'
import ProgramList from './components/ProgramList/index.vue'
import RadioType from './components/RadioType/index.vue'
import GoodRadio from './components/GoodRadio/index.vue'
import RadioRankingList from './components/RadioRankingList/index.vue'

import {useStore} from "@/store/index"
import {reactive, toRefs} from "vue";
import {useRouter} from "vue-router";


const router = useRouter()
const store = useStore()
const data = reactive({
  categories: [], // 电台标题数据
  programs: {}, // 推荐节目数据
  toplist: {}, // 节目排行榜
  typeList: [], // 类型数据
  radioTypeId: null, // 电台类型id
  radioTypeData: [], // 电台类型数据
  loading: false // loading
})

const {categories, programs, toplist, radioTypeId, radioTypeData, loading} = toRefs(data)
// 获取标题
store.getDjCatelist().then(categories => {
  data.categories = categories
  // console.log(categories)
})

// 获取推荐节目
store.getProgramRecommend().then(res => {
  data.programs = res
  // console.log(res)
})

// 开启loading
data.loading = true

// 获取节目榜单
store.getDjProgramToplist().then(toplist => {
  // 关闭loading
  data.loading = false

  data.toplist = {
    name: '节目排行榜',
    programs: toplist.slice(0, 10)
  }

  // console.log(data.toplist)
})

// 选择电台类型
const selectRadioType = (radio) => {
  console.log(radio)
  data.radioTypeId = radio.id
  // 获取类型音乐只有四条
  store.getDjRecommendType(radio.id).then(res => {
    data.radioTypeData = res.slice(0, 4)
  })
}


// 跳转到电台详情
const jumpDjRadio = (id) => {
  router.push({
    path: '/dj-radio',
    query: {
      id
    }
  })
}


</script>

<style lang="scss" scoped>
:deep(.van-loading) {
  color: v-bind('store.theme.textColor');
}
</style>
